<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--//导入js包-->
    <script src="js/vue.js"></script>
    <!-- Bootstrap -->
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>

    <style>
        /*自定义两组样式。来控制transition内部的元素实例动画*/
        /*v-enter 【时间点进入之前】 元素的起始状态，此时还没有开始进入*/
        /*v-leave-to [这是一个时间点】是动画离开之后，离开的终止状态，此时元素动画已经结束*/
        .v-enter, v-leave-to {
            opacity: 0;
            transform: translateX(800px);
        }

        /*v-enter-active入场时段*/
        /*v-leave-active出场时段*/
        .v-enter-active,
        .v-leave-active {
            transition: all 0.4s ease;
        }
    </style>
</head>
<body>
<div id="app">
    <input type="button" value="戳我进入" @click="flag=!flag">
    <transition>
        <!--需求：点击按钮，让p显示，再点击，让p隐藏-->
        <p v-if="flag">{{msg}}</p>
    </transition>
</div>


<script type="text/javascript">

    new Vue({
        el: '#app',
        data: {
            msg: 'hellfo  vue.js.',
            flag: false
        }
    });
</script>
</body>
</html>